<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas入门</title>
</head>
<style>
    #canvas{
        /*width: 1200px;*/
        /*height: 1200px;*/
    }
</style>
<body>
<!--    设置canvas标签通过宽高设置-->
    <canvas id="canvas" width="600px" height="600px">
        <!--  当浏览器不支持时 将展示文本,如果支持 则绘画canvas   -->
        你的浏览器不支持canvas,请升级浏览器

    </canvas>

    <script>
        window.onload = function () {
            console.log(123)
            // var canvasRef = document.getElementById('canvas');
            //获取 canvas节点
            var canvasRef = document.querySelector('#canvas');
            console.log(canvasRef)
            //可以使用js设置canvas宽高 不要使用css设置宽高:canvasRef.style.width=600
            // canvasRef.width=600;
            // canvasRef.height=600;
            //获取 canvas上下文
            var ctx = canvasRef.getContext('2d');

            //开始绘画
            //在坐标轴中定位坐标点
            ctx.moveTo(100,100);//将开始坐标定位在距离左上100的位置
            //绘画直线,从开始坐标画到(x,y)坐标
            ctx.lineTo(200,100);
            ctx.lineTo(100,200);
            //回到开始点位
            // ctx.lineTo(100,100);
            ctx.closePath();//自动闭合路径

            //设置样式
            ctx.strokeStyle = 'blue' // 设置描边样式
            ctx.lineWidth = 4;//设置描边宽度 2px靠外 2px靠内
            ctx.fillStyle='red';//填充内容
            ctx.fill();//填充闭合内容
            ctx.stroke();//绘画 开始描边
        }
    </script>
</body>
</html>
